scrapboxのトップページへのリンクをnav barに固定するUserCSS 2024-02-24変更版

井戸端用にbrand iconの幅とそれに伴う余白の調整、titleの色の変更をした

code:style.css

.container:has(.quick-launch) {

width: 100%;

max-width: unset;

padding: unset;

margin: unset;

}

.quick-launch .flex-box { display: unset; }

.quick-launch .flex-box .flex-item { min-width: unset; }

.quick-launch .flex-box .flex-item:has(.left-box) {

container-type: inline-size;

position: fixed;

top: 0;

z-index: 1000;

width: 100%;

height: 40px;

pointer-events: none;

}

.quick-launch .flex-box .flex-item:has(.right-box) {

padding-right: 8px;

padding-left: 8px;

margin-right: auto;

margin-left: auto;

}

@media (min-width: 768px) {

.quick-launch .flex-box .flex-item:has(.right-box) {

width: 736px;

}

}

@media (min-width: 992px) {

.quick-launch .flex-box .flex-item:has(.right-box) {

width: 956px;

}

}

@media (min-width: 1200px) {

.quick-launch .flex-box .flex-item:has(.right-box) {

width: 1156px;

}

}

@media (min-width: 992px) {

.quick-launch .flex-box .flex-item:has(.right-box) {

width: calc(100% - 60px);

max-width: 1200px;

}

}

@media (min-width: 768px) and (max-width: 991px) {

.quick-launch .flex-box .flex-item:has(.right-box) {

width: calc(100% - 30px);

}

}

.quick-launch .left-box { /* <ボタンなし; 下矢印なし */

--padding: 16px;

--history-back-button: 46px;

/* --brand-icon: 32px; */

--brand-icon: 40px;

--kamon-caret-down: 24px;

--width-ratio: 0.3;

--col-brand: calc((100cqw - var(--padding) * 2) * var(--width-ratio));

--col-brand-contents: var(--brand-icon);

--toggle-button: 24px;

--page-menu: calc(158px + var(--toggle-button));

--mobile-edit-tools: calc(280px + var(--toggle-button));

width: var(--col-brand);

padding-left: var(--col-brand-contents);

margin-left: var(--padding);

}

@media (max-width: 767px) {

.quick-launch .left-box {

--padding: 8px;

--width-ratio: 0.7;

}

}

.app:has(.navbar .kamon-caret-down) .quick-launch .left-box { /* <ボタンなし; 下矢印あり */

--col-brand-contents: calc(var(--brand-icon) + var(--kamon-caret-down));

}

.app:has(.navbar .history-back-button) .quick-launch .left-box { /* <あり; 下矢印なし */

--col-brand-contents: calc(var(--history-back-button) - var(--padding) + var(--brand-icon));

}

.app:has(.navbar .history-back-button):has(.navbar .kamon-caret-down) .quick-launch .left-box { /* <ボタンあり; 下矢印あり */

--col-brand-contents: calc(var(--history-back-button) - var(--padding) + var(--brand-icon) + var(--kamon-caret-down));

}

.quick-launch .left-box > * { pointer-events: auto; }

.quick-launch .project-home {

--tool-text-color: white;

min-height: unset;

/* padding: 0 6px; */

padding: 0 8px;

border: unset;

}

.app:not(:has(.navbar .kamon-caret-down)) .quick-launch .project-home {

/* margin-left: 2px; */

margin-left: 4px;

}

@media (max-width: 767px) {

.app:has(.page-menu.xs) .quick-launch .left-box {

--expandable-menu: var(--page-menu);

clip-path: inset(0 max(var(--padding) + var(--col-brand) - (100cqw - var(--expandable-menu)), 0px) 0 0);

}

.app:has(.page-menu.xs.mobile-edit-tools) .quick-launch .left-box {

--expandable-menu: var(--mobile-edit-tools);

}

}